<template>
  <div class="information">
    <titleText title="我的订单"></titleText>
    <div class="detail_title">
      <div class="title_right">
        <div class="wallet_tab">
          <div
            class="tab_item"
            :class="item.isActive ? 'active' : ''"
            v-for="(item, index) in tabsList"
            :key="index"
            @click="select(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="tab_content" v-loading="loading">
      <div class="table_th">
        <div class="th_item th_w_1">课程名称</div>
        <div class="th_item th_w_2">金额</div>
        <div class="th_item th_w_3">状态</div>
        <div class="th_item th_w_4">操作</div>
      </div>
      <div class="table_td" v-for="(item, index) in orderList" :key="index">
        <div class="td_item th_w_1">
          {{ item.freecourselist_kechengbiaoti }}
        </div>
        <div class="td_item th_w_2">￥{{ item.dingdanjiage }}</div>
        <div class="td_item th_w_3">
          {{ item.dingdanzhuangtai_name }}
        </div>
        <div class="td_item th_w_4">
          <span
            @click="
              payment(
                item.freecourselist_id,
                item.dingdanjiage,
                item.dingdanhao
              )
            "
            v-if="item.dingdanzhuangtai == 0"
            >去付款</span
          >
          <span
            @click="evaluateClick(item.freecourselist_id)"
            v-if="item.dingdanzhuangtai == 1"
            >评价</span
          >
          <span @click="goInvoice(item.freecourselist_id, item.aid)" v-if="item.is_open_invoice == 0">申请发票</span>
          <span class="see_details" @click="seeDetails(item.dingdanhao)"
            >查看详情</span
          >
        </div>
      </div>
    </div>
    <div class="no_data" v-if="orderList.length == 0 && !loading">
      <img class="no_img" src="../../../assets/default/12.png" alt="" />
    </div>
    <paging
      :total="total"
      :pageSize="pageSize"
      @pageChange="pageChange"
    ></paging>

    <evaluate
      ref="evContent"
      :course_id="course_id"
      @confirm="evaluateConfirm"
    ></evaluate>
  </div>
</template>


<script name="myInformation" setup>
import emitter from "@/utils/mitt.js";
import { post65e6ea21a1cac } from "@/utils/api.js";
import titleText from "../titleText.vue";
import paging from "@/components/paging.vue";
import evaluate from "./evaluate.vue";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
let tabsList = reactive([
  {
    name: "全部",
    order_type: 0,
    isActive: true,
  },
  {
    name: "未支付",
    order_type: 1,
    isActive: false,
  },
  {
    name: "未评价",
    order_type: 2,
    isActive: false,
  },
  {
    name: "已评价",
    order_type: 3,
    isActive: false,
  },
]);

onMounted(() => {
  getList();
  emitter.on('paySuccess',() => {
    pageNum.value = 1;
    getList();
  })
});
onBeforeUnmount(() => {
  emitter.off('paySuccess');
})

let order_type = ref(0);
let orderList = reactive([]);
let total = ref(0);
let loading = ref(true);
let pageNum = ref(1);
let pageSize = ref(10);
function getList() {
  post65e6ea21a1cac({
    dingdanzhuangtai: order_type.value,
    page: pageNum.value,
    list_rows: pageSize.value,
  }).then((res) => {
    console.log(res);
    loading.value = false;
    if (res.code == 1) {
      total.value = res.data.total;
      orderList = res.data.data;
    }
  });
}
// 分页
function pageChange(page) {
  pageNum.value = page;
  loading.value = true;
  getList();
}

// 评价
let course_id = ref("");
let evContent = ref(null);
function evaluateClick(aid) {
  course_id.value = aid;
  evContent.value.openLayer();
}
function evaluateConfirm() {
  loading.value = true;
  getList();
}

// 切换tab
function select(index) {
  order_type.value = tabsList[index].order_type;
  tabsList.forEach((item, index) => {
    item.isActive = false;
  });
  tabsList[index].isActive = true;
  pageNum.value = 1;
  loading.value = true;
  getList();
}

// 去付款
function payment(aid, price, dingdanhao) {
  router.push({
    path: "/pay",
    query: {
      aid: aid,
      price: price,
      order_sn: dingdanhao,
    },
  });
}
// 去开票
function goInvoice(freecourselist_id, aid) {
  router.push({
    path: "/MyOrder/invoice",
    query: {
        freecourselist_id: freecourselist_id,
        freecourseorder_id: aid
    }
  });
}
// 查看详情
function seeDetails(order_sn) {
  router.push({
    path: "/MyOrder/orderDetails",
    query: {
        order_sn: order_sn
    }
  });
}
</script>

<style lang="scss" scoped>
.information {
  padding: 18px 16px;
  background: #fff;
  min-height: 437px;

  .detail_title {
    margin: 19.5px 0 15.5px;
    .title_right {
      .wallet_tab {
        display: flex;
        align-items: center;
        .tab_item {
          width: 36px;
          height: 16px;
          background: #f6f7f9;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 8px;
          color: #666666;
          margin-right: 10px;
          cursor: pointer;
          &.active {
            background: #e8edf7;
            color: #1f52ae;
            font-weight: 500;
          }
        }
      }
    }
  }
  .tab_content {
    margin: 15.5px 0 8px 0;
    width: 546px;
    .table_th {
      background: #f6f7f9;
      border-top: 1px solid #eeeeee;
      border-left: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      .th_item {
        padding: 8.5px 12px;
        // padding: 0 12px;
        border-right: 1px solid #eeeeee;
        font-size: 7px;
        color: #666;
      }
    }
    .table_td {
      border-left: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      .td_item {
        padding: 8.5px 12px;
        border-right: 1px solid #eeeeee;
        font-size: 7px;
        display: flex;
        align-items: center;
        span {
          margin-right: 16px;
          cursor: pointer;
        }
        .see_details {
          color: #1f52ae;
        }
      }
    }
    .th_w_1 {
      width: 170px;
    }
    .th_w_2 {
      width: 102px;
    }
    .th_w_3 {
      width: 102px;
    }
    .th_w_4 {
      width: 170px;
    }
    .table_td:hover {
      background: #f6f7f9;
    }
  }
}
</style>